import React, {useEffect, useState} from 'react'
import {Button, Form, Radio} from 'antd'
import {connect, history} from 'umi'
import {SoundEnum} from '../constant'
import {getDict} from '@/service/common/dict'
import {driverDetailRequest} from '@/service/customer/driver'
// import { getDeptList } from '@/service/system/dept';
import {getCompany} from '@/service/common/index'
import {translateDataToTree} from '@/utils/common/index'
import PersonalInformation from '../components/PersonalInformation'
import ImageInfo from '../components/ImageInfo'
import CreditInformation from '../components/CreditInformation'
import HealthInformation from '../components/HealthInformation'
import BankCard from '../components/BankCard'
import EmergencyContact from '../components/EmergencyContact'
import LeaseLnformation from '../components/LeaseLnformation'
import HistoricalLease from '../components/HistoricalLease'
import styles from './index.less'
import OperationRecord from '../components/OperationRecord'

const PageType = {
	add: 'add',
	edit: 'edit',
	detail: 'detail',
}

export type TreeItem = {
	id: string
	parentId: number
	name: string
	children?: Array<TreeItem>
}[]

const detail = (props: any) => {
	const [companyData, setCompanyData] = useState<any[]>([])
	const [tabValue, setTabValue] = useState('1')
	const routerQuery = props.location.query
	const pageType = routerQuery.type
	const [personalInformationFrom]: any = Form.useForm()
	const [creditInformationFrom]: any = Form.useForm()
	const [healthInformationForm]: any = Form.useForm()
	const [emergencyContactFrom]: any = Form.useForm()
	const [bankCardForm]: any = Form.useForm()
	const [leaseLnformationForm]: any = Form.useForm()
	const [fileList, setFileList] = useState<any>([])
	const [physicalFileList, setPhysicalFileList] = useState<any>([])
	const [orderList, setOrderList] = useState<any[]>([])
	const [illegalList, setIllegalList] = useState<any[]>([])
	const [historyDataList, setHistoryDataList] = useState<any[]>([])
	const [detailRecord, setDetailRecord] = useState<any>({})
	// const [loading, setLoading] = useState(false);
	const [dict, setDict] = useState<any>({
		yes_no: [],
		education: [],
		driver_channel_source: [],
		driver_status: [],
		online_car_hailing_experience: [],
		work_experience: [],
		relationship: [],
		sex: [],
	})

	/** 获取所属公司数据 */
	const onCompany = () => {
		getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
			if (res?.success) {
				const list = translateDataToTree(res.data)
				setCompanyData(list as any)
			}
		})
	}

	useEffect(() => {
		getDict(
			{
				dictKeys: [
					'yes_no',
					'education',
					'driver_channel_source',
					'driver_status',
					'online_car_hailing_experience',
					'work_experience',
					'relationship',
					'sex',
				],
			},
			(res: any) => {
				setDict(res)
			},
		)
		onCompany()
	}, [])

	const getDriverDetail = async () => {
		const data = await driverDetailRequest({
			driverId: routerQuery.id,
			status: routerQuery.status,
			orgId: routerQuery.orgId,
		})
		if (data.code === 0) {
			setDetailRecord(data.data)
		}
	}
	console.log(detailRecord, 'detailRecord-----')

	useEffect(() => {
		if (pageType === PageType.detail) {
			getDriverDetail()
		}
	}, [pageType, routerQuery.id])

	return (
		<div className={styles.detail}>
			<Radio.Group
				value={tabValue}
				onChange={(e) => {
					setTabValue(e.target.value)
				}}>
				<Radio.Button value="1">个人信息</Radio.Button>
				<Radio.Button value="2">图片信息</Radio.Button>
				<Radio.Button value="3">信用信息</Radio.Button>
				<Radio.Button value="4">健康信息</Radio.Button>
				<Radio.Button value="5">银行卡信息</Radio.Button>
				<Radio.Button value="6">紧急联系人</Radio.Button>
				<Radio.Button value="7">当前租赁信息</Radio.Button>
				<Radio.Button value="8">历史租赁信息</Radio.Button>
				<Radio.Button value="9">操作记录</Radio.Button>
			</Radio.Group>
			{tabValue === '1' && (
				<PersonalInformation
					orgList={companyData}
					personalInformationFrom={personalInformationFrom}
					pageType={pageType}
					dirver={SoundEnum.no}
					dict={dict}
					detailRecord={detailRecord}
				/>
			)}
			{tabValue === '2' && (
				<ImageInfo
					fileList={fileList}
					setFileList={setFileList}
					physicalFileList={physicalFileList}
					setPhysicalFileList={setPhysicalFileList}
					pageType={pageType}
					detailRecord={detailRecord}
				/>
			)}
			{tabValue === '3' && (
				<CreditInformation
					dict={dict}
					creditInformationFrom={creditInformationFrom}
					pageType={pageType}
					detailRecord={detailRecord}
				/>
			)}
			{tabValue === '4' && (
				<HealthInformation
					healthInformationForm={healthInformationForm}
					pageType={pageType}
					detailRecord={detailRecord}
				/>
			)}
			{tabValue === '5' && (
				<BankCard
					detailRecord={detailRecord}
					bankCardForm={bankCardForm}
					pageType={pageType}
				/>
			)}
			{tabValue === '6' && (
				<EmergencyContact
					pageType={pageType}
					emergencyContactFrom={emergencyContactFrom}
					detailRecord={detailRecord}
				/>
			)}
			{tabValue === '7' && (
				<LeaseLnformation
					driverId={routerQuery.id}
					leaseLnformationForm={leaseLnformationForm}
					orderList={orderList}
					setOrderList={setOrderList}
					illegalList={illegalList}
					setillegalList={setIllegalList}
				/>
			)}
			{tabValue === '8' && (
				<HistoricalLease
					driverId={routerQuery.id}
					historyDataList={historyDataList}
					setHistoryDataList={setHistoryDataList}
					dict={dict}
					orgList={companyData}
				/>
			)}
			{tabValue === '9' && <OperationRecord driverId={routerQuery.id} />}
			<div className={styles.operation}>
				<Button
					style={{marginLeft: '5px;'}}
					onClick={() => {
						history.go(-1)
					}}>
					返回
				</Button>
			</div>
		</div>
	)
}

export default connect(({user}: any) => ({user}))(detail)
